import React from 'react'
import { List } from './list'
import { SearchPanel } from './search-panel'
import { useState } from 'react'
import { useDebounce, useDocumentTitle } from 'utils'
import styled from '@emotion/styled'
import { Typography, Button } from 'antd'
import { useProjects } from 'utils/use-projects'
import { useUsers } from 'utils/use-users'
import { useProjectSearchParams } from './util'
import { Row } from 'components/lib'

export const apiURL = process.env.REACT_APP_API_URL

export const ProjectList = (props: { projectButton: JSX.Element }) => {
  useDocumentTitle('项目列表')

  const { data: users } = useUsers()
  const [param, setParam] = useProjectSearchParams()
  const { isLoading, error, data: list, retry } = useProjects(useDebounce(param))

  return (
    <Container>
      <RowHeader between={true}>
        <h1>项目列表</h1>
        {props.projectButton}
      </RowHeader>
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      {error ? <Typography.Text type={'danger'}>{error.message}</Typography.Text> : null}
      <List
        projectButton={props.projectButton}
        retryCallback={retry}
        loading={isLoading}
        users={users || []}
        dataSource={list || []}
      />
    </Container>
  )
}

ProjectList.whyDidYouRender = false

const Container = styled.div`
  margin-left: 3.2rem;
`
const RowHeader = styled(Row)`
  padding: 3.2rem;
  padding-bottom: 0;
`
